<template>
  <div class="app-container">
    <div class="searchform">
      <el-form
        ref="search"
        :model="search"
        size="mini"
        label-width="90px"
      >
        <el-row :gutter="6">

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="dealer_name" label="经销商名称">
              <el-input
                v-model="search.dealer_name"
                placeholder="经销商名称"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="dealer_code" label="经销商代码">
              <el-input
                v-model="search.dealer_code"
                placeholder="经销商代码"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="province" label="省份">
              <el-select v-model="search.province" clearable placeholder="请选择" @change="changeProvince">
                <el-option v-for="item in provinceOptions" :key="item.region_id" :label="item.region_name" :value="item.region_id"/>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="city" label="市">

              <el-select v-model="search.city" clearable placeholder="请选择" >
                <el-option v-for="item in cityOptions" :key="item.region_id" :label="item.region_name" :value="item.region_id"/>
              </el-select>
            </el-form-item>

          </el-col>

          <!-- <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="is_view" label="是否展示">
              <r-select v-model="search.is_view" type="1004"/>
            </el-form-item>
          </el-col> -->

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="is_pay" label="是否交付中心">
              <r-select v-model="search.is_pay" type="1004"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="is_ty" label="是否体验中心">
              <r-select v-model="search.is_ty" type="1004"/>
            </el-form-item>
          </el-col>

          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('search')">重置</el-button>
          </div>
        </el-row>
      </el-form>
    </div>

    <div class="table">
      <div class="tableHead">
        <div class="tabletitle">列表</div>
        <div class="btnGroup">
          <el-button-group>
            <el-button :loading="exportLoading" type="primary" icon="el-icon-download" @click="recordExportData">导出</el-button>

            <el-button
              :loading="exportLoading"
              type="primary"
              icon="el-icon-download"
              @click="exportExcel(table)"
            >模板下载
            </el-button>
            <importErrMsg
              :limit="1"
              url="/dealer/dealerImport"
              model="DMSCLOUD_VEHICLE"
              title="导入"
              name="导入"
              @exportSuccess="exportSuccess"
            />
            <el-button
              icon="el-icon-s-shop"
              @click="showConfImg = true"
            >体验门店图片维护
            </el-button>

          </el-button-group>
        </div>
      </div>
      <baseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
        <el-table-column type="index" label="序号" min-width="50"/>
        <el-table-column align="center" label="操作" min-width="180">
          <template slot-scope="scope">
            <!-- <el-tooltip v-if="scope.row.is_view == 10041002" class="item" content="设置展示" placement="bottom" >
              <button class="el-button  my-dealer-view-set my-dealer-button el-button--small" type="button" @click="updateStatusOper(scope.row,'is_view')" />
            </el-tooltip>
            <el-tooltip v-if="scope.row.is_view == 10041001" class="item" content="取消展示" placement="bottom" >
              <button class="el-button  my-dealer-view-unset my-dealer-button el-button--small" type="button" @click="updateStatusOper(scope.row,'is_view')" />
            </el-tooltip> -->
            <el-tooltip v-if="scope.row.is_pay == 10041002" class="item" content="设置交付中心" placement="bottom" >
              <button class="el-button  my-dealer-pay-set my-dealer-button el-button--small  " type="button" @click="updateStatusOper(scope.row,'is_pay')" />
            </el-tooltip>
            <el-tooltip v-if="scope.row.is_pay == 10041001" class="item" content="取消交付中心" placement="bottom" >
              <button class="el-button  my-dealer-pay-unset my-dealer-button el-button--small" type="button" @click="updateStatusOper(scope.row,'is_pay')" />
            </el-tooltip>
            <el-tooltip v-if="scope.row.is_ty == 10041002" class="item" content="设置体验中心" placement="bottom" >
              <button class="el-button  my-dealer-ty-set my-dealer-button el-button--small" type="button" @click="updateStatusOper(scope.row,'is_ty')" />
            </el-tooltip>
            <el-tooltip v-if="scope.row.is_ty == 10041001" class="item" content="取消体验中心" placement="bottom" >
              <button class="el-button  my-dealer-ty-unset my-dealer-button el-button--small" type="button" @click="updateStatusOper(scope.row,'is_ty')" />
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column type="selection" width="50"/> -->
        <el-table-column :show-overflow-tooltip="true" prop="dealer_name" label="经销商名称" min-width="150"/>
        <el-table-column prop="dealer_code" label="经销商代码" min-width="150"/>
        <el-table-column prop="province_name" label="省" min-width="150"/>
        <el-table-column prop="city_name" label="市" min-width="150"/>
        <el-table-column prop="longitude" label="经度" min-width="150"/>
        <el-table-column prop="latitude" label="维度" min-width="150"/>
        <!-- <el-table-column prop="is_view" label="是否展示" min-width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_view === 10041001 ? 'success' : 'primary'" close-transition @click="updateStatusOper(scope.row,'is_view')">
              <filtercode v-model="scope.row.is_view" type="1004" />
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_pay" label="是否交付中心" min-width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_pay === 10041001 ? 'success' : 'primary'" close-transition @click="updateStatusOper(scope.row,'is_pay')">
              <filtercode v-model="scope.row.is_pay" type="1004"/>
            </el-tag>
          </template>
        </el-table-column><el-table-column prop="is_view" label="是否体验中心" min-width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_ty === 10041001 ? 'success' : 'primary'" close-transition @click="updateStatusOper(scope.row,'is_ty')">
              <filtercode v-model="scope.row.is_ty" type="1004"/>
            </el-tag>
          </template>
        </el-table-column> -->
        <!-- <el-table-column prop="is_view_name" label="是否展示" min-width="150"/> -->
        <el-table-column prop="is_pay_name" label="是否交付中心" min-width="150"/>
        <el-table-column prop="is_ty_name" label="是否体验中心" min-width="150"/>
      </BaseTable>
    </div>
    <configImgDetail v-if="showConfImg" :show-conf-img.sync="showConfImg"/>
  </div>
</template>
<script>
import rSelect from '@/components/Select/Select'
import BaseTable from '@/components/BaseTable'
import filtercode from '@/components/Checkbox/filtercode'
import { queryPageInfos4dealer, queryInfos4dealer, updateStatus4dealer } from '@/api/vehicle/dealer.js'
import formMixins from '@/mixins/formMixins'
import { mapGetters } from 'vuex'
import { exportFile } from '@/utils'
import importErrMsg from '@/components/uploads/importErrMsg'
import configImgDetail from './configImgDetail.vue'

import moment from 'moment'
import _ from 'lodash'

export default {
  name: 'DealerIndex',
  components: {
    BaseTable,
    rSelect,
    configImgDetail,
    importErrMsg,
    filtercode,
    moment
  },

  mixins: [formMixins],
  data() {
    return {
      showConfImg: false,
      exportLoading: false,
      provinceOptions: [],
      cityOptions: [],
      search: { dealer_code: '',
        dealer_name: '',
        province: '',
        city: '',
        is_view: '',
        is_pay: '',
        is_ty: '',
        limit: 10,
        pageNum: 1
      },
      tableList: []
    }
  },
  computed: {
    ...mapGetters(['dictMap', 'regionMap'])
  },

  watch: {
    'search.province': function(val) {
      console.log(val)
      if (!val) {
        this.cityOptions = []
        this.search.city = ''
      }
    }
  },

  mounted() {
    this.searchHandle()

    const array = Object.values(this.regionMap)
    this.provinceOptions = array
    // console.log(this.provinceOptions)
  },
  methods: {

    // 模板下载(前端实现)
    exportExcel(table) {
      const option = {
        tHeader: [
          '经销商代码(*)',
          '是否交付中心(*)',
          '是否体验中心(*)'
        ],

        filterVal: [],
        table: table,
        fileName: '体验交付中心修改模板'
      }
      exportFile(option, () => {
        this.exportLoading = false
      })
    },
    changeProvince() {
      const p = this.search.province

      console.log(this.regionMap[p])
      this.cityOptions = this.regionMap[p].children
      this.search.city = ''
    },
    searchHandle() {
      this.dialogVisible = false
      const table = this.$refs['table']
      const search = _.extend(this.search)
      queryPageInfos4dealer(Object.assign({}, search))
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    // exportError(response, file) {

    // },
    exportSuccess(response, file) {
      this.$message({
        type: 'success',
        message: `${file.name}导入成功!`
      })
      this.searchHandle()
    },
    // 导出
    recordExportData() {
      if (this.createDate != null && this.createDate.length > 0) {
        this.search.createDateStart = this.createDate[0]
        this.search.createDateEnd = this.createDate[1]
      } else {
        this.search.createDateStart = ''
        this.search.createDateEnd = ''
      }
      this.exportLoading = true
      queryInfos4dealer(this.search)
        .then(res => {
          const option = {
            tHeader: ['经销商名称', '经销商代码', '省', '市', '经度', '维度', '是否交付中心', '是否体验中心'],
            filterVal: ['dealer_name', 'dealer_code', 'province_name', 'city_name', 'longitude', 'latitude', 'is_pay_name', 'is_ty_name'],
            table: res,
            fileName: '经销商查询导出'
          }
          exportFile(option, () => {
            this.exportLoading = false
          })
        })
        .catch(err => {})
    },
    // updateStatusOper(row, operType) {
    //   const that = this

    //   let typeName = ''
    //   //  'is_view_name', 'is_pay_name', 'is_ty_name'],
    //   let operTypeValue = ''
    //   const isPay = row.is_pay
    //   console.log(row)
    //   console.log(operType)
    updateStatusOper(row, operType) {
      const that = this

      let typeName = ''
      //  'is_view_name', 'is_pay_name', 'is_ty_name'],
      let operTypeValue = ''

      let confirmMsg = ''
      switch (operType) {
        case 'is_ty':
          typeName = '体验中心'
          if (row.is_ty == 10041002) {
            confirmMsg = `确认设置经销商【${row.dealer_name}】为${typeName}?`
            operTypeValue = 10041001
          } else {
            confirmMsg = `确认取消经销商【${row.dealer_name}】为${typeName}?`
            operTypeValue = 10041002
          }
          break
        case 'is_pay':
          typeName = '支付中心'
          if (row.is_pay == 10041002) {
            confirmMsg = `确认设置经销商【${row.dealer_name}】为${typeName}?`
            operTypeValue = 10041001
          } else {
            confirmMsg = `确认取消经销商【${row.dealer_name}】为${typeName}?`
            operTypeValue = 10041002
          }
          break
        // case 'is_view':
        //   typeName = '展示'
        //   operTypeValue = row.is_view == 10041001 ? 10041002 : 10041001

        //   break

        default: {
          this.$message({
            type: 'warning',
            message: '操作类型异常!'
          })
          return false
        }
      }
      // const confirmText = '确认设置经销商【' + row.dealer_name + '】为"' + (typeName) + '"?'
      // const confirmText2 = '确认取消经销商【' + row.dealer_name + '】的"' + (typeName) + '"?'

      this.$confirm(confirmMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        updateStatus4dealer({ 'dealer_id': row.dealer_id, 'operTypeValue': operTypeValue, 'operType': operType }).then(res => {
          that.$message.success('操作成功！')
          that.searchHandle()
        })
      }).catch(() => {
      })
    // }
    }
    // switch (operType) {
    //   case 'is_ty':
    //     typeName = '体验中心'
    //     operTypeValue = row.is_ty == 10041001 ? 10041002 : 10041001

    //     break
    //   case 'is_pay':
    //     typeName = '支付中心'
    //     operTypeValue = row.is_pay == 10041001 ? 10041002 : 10041001

    //     break
    //   case 'is_view':
    //     typeName = '展示'
    //     operTypeValue = row.is_view == 10041001 ? 10041002 : 10041001

    //     break

    //   default: {
    //     this.$message({
    //       type: 'warning',
    //       message: '操作类型异常!'
    //     })
    //     return false
    //   }
    // }
    // const confirmText = '确认设置经销商【' + row.dealer_name + '】为"' + (typeName) + '"?'
    // const confirmText2 = '确认取消经销商【' + row.dealer_name + '】的"' + (typeName) + '"?'

    //   if (isPay == 10041002) {
    //     this.$confirm(confirmText, '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning',
    //       center: true
    //     }).then(() => {
    //       updateStatus4dealer({ 'dealer_id': row.dealer_id, 'operTypeValue': operTypeValue, 'operType': operType }).then(res => {
    //         that.$message.success('操作成功！')
    //         that.searchHandle()
    //       })
    //     }).catch(() => {
    //     })
    //   } else {
    //     this.$confirm(confirmText2, '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning',
    //       center: true
    //     }).then(() => {
    //       updateStatus4dealer({ 'dealer_id': row.dealer_id, 'operTypeValue': operTypeValue, 'operType': operType }).then(res => {
    //         that.$message.success('操作成功！')
    //         that.searchHandle()
    //       })
    //     }).catch(() => {
    //     })
    //   }
    // }
  }
}
</script>

<style scoped>

.my-dealer-view-set {
  background: url('~@/assets/img/dealer/view_set.png') center no-repeat;

  width:25px;
  height:25px;
  background-size: 90% 90%;
  border: none;
}
.my-dealer-view-unset {
  background: url('~@/assets/img/dealer/view_unset.png') center no-repeat;

  width:25px;
  height:25px;
  background-size: 90% 90%;
  border: none;
}

.my-dealer-ty-set {
  background: url('~@/assets/img/dealer/ty_set.png') center no-repeat;

  width:25px;
  height:25px;
  background-size: 90% 90%;
  border: none;
}
.my-dealer-ty-unset {
  background: url('~@/assets/img/dealer/ty_unset.png') center no-repeat;

  width:25px;
  height:25px;
  background-size: 90% 90%;
  border: none;
}

.my-dealer-pay-set {
  background: url('~@/assets/img/dealer/pay_set.png') center no-repeat;

  width:25px;
  height:25px;
  background-size: 90% 90%;
  border: none;
}
.my-dealer-pay-unset {
  background: url('~@/assets/img/dealer/pay_unset.png') center no-repeat;

  width:25px;
  height:25px;
  background-size: 90% 90%;
  border: none;
}

.content a {
    color: #409eff;
}
</style>
